<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/common.jspf"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<!--Import materialize.css-->
		<link type="text/css" rel="stylesheet" href="${ctx}/static/css/materialize.min.css" media="screen,projection" />
		<!-- 导入补充样式 -->
		<link type="text/css" rel="stylesheet" href="${ctx}/static/css/supplement.css" />
		<!-- Material Design图标 -->
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

		<!--Let browser know website is optimized for mobile-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body>
		<header>
			<nav>
				<div class="nav-wrapper">
					<div class="col s12" style="padding: 0 0.75em;">
						<a href="#" class="breadcrumb">菜单管理</a>
						<a href="#" class="breadcrumb">菜单维护</a>
					</div>
				</div>
			</nav>

			<div class="container"></div>
			<%@ include file="/jsp/nav.jsp" %>
		</header>

		<main>
			<div class="row">
				<div class="col s12 m10 110">
					<div class="col s4">
					   ${menuListHtml }
					</div>

					<div class="col s8">
						<form class="col s8 card-panel" method="post" action="editMenu.action">
							<div class="row"></div>
							<div class="row right">
								<a class="waves-effect waves-light btn" href="toSaveMenu.action">新增</a>
							</div>
							<div class="row">
                                <div class="input-field col s12" style="display: none;">
                                    <input id="id" name="id" type="text" class="validate" value="-1" />
                                    <label for="id">菜单ID</label>
                                </div>
                            </div>
							<div class="row">
								<div class="input-field col s12">
									<input disabled id="superiorMenuId" name="superiorMenuId" type="text" class="validate" value="无" />
									<label for="superiorMenuId">上级菜单</label>
								</div>
							</div>
							<div class="row">
								<div class="input-field col s12">
									<input id="name" name="name" type="text" class="validate" />
									<label for="name">菜单名称</label>
								</div>
							</div>
							<div class="row">
								<div class="input-field col s12">
									<input id="url" name="url" type="text" class="validate" />
									<label for="url">URL</label>
								</div>
							</div>
							<div class="row right">
								<input type="submit" class="btn" value="修改" />
								<a id="delet-menu-btn" class="waves-effect waves-light btn">删除</a>
							</div>
						</form>
					</div>
				</div>
			</div>
		</main>

		<script src="${ctx}/static/js/jquery-3.1.0.min.js"></script>
		<script src="${ctx}/static/js/materialize.min.js"></script>
		<script type="text/javascript">
            $("div.collapsible-header").on("click", function() {
                var menu_id = $(this).attr("menu-id");
                $.ajax({
                    async: false,
                    url: "resultMenuJSON.action",
                    data: {
                        id: menu_id
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(menu) {
                        //设置菜单ID
                        $("input#id").attr("value", menu.id);
                        //设置上级菜单名称
                        if (menu.superiorMenuName != null) {
                            $("input#superiorMenuId").attr("value", menu.superiorMenuName);
                        } else {
                            $("input#superiorMenuId").attr("value", "无");
                        }
                        //设置菜单名称
                        $("input#name").val(menu.name);
                        $("input#name").next().attr("class", "active");
                        //设置菜单URL
                        $("input#url").val(menu.url);
                        $("input#url").next().attr("class", "active");

                        //设置删除按钮href属性
                        $("#delet-menu-btn").attr("href", "deleteMenu.action?id=" + menu.id);
                    }
                });
            });
        </script>
	</body>

</html>